import { reactive, ref } from 'vue'
import { FormItemType } from '@/components/form/type'
import {
  reqMemberBody,
  reqMemberRoleBody,
} from '@/pages/topic/api/types/member.ts'
import { tableColumn } from '@/components/table/column'
import { API, reqQueryRoleList } from '@/pages/topic/api/member.ts'

export const useAddMember = () => {
  const memberTableColumn = ref<tableColumn[]>([
    {
      label: '成员',
      prop: 'name',
      type: 'slot',
      slotName: 'userinfo',
      width: '250',
    },
    { label: '角色', prop: 'roleName' },
    { label: '简介', prop: 'intro' },
    { label: '电话', prop: 'phone' },
    { label: '邮箱', prop: 'email' },
    { label: '附件', prop: 'fileUrlList' },
    { label: '权重', prop: 'weight' },
    { label: '状态', prop: 'status' },
    { label: '操作', prop: '-', type: 'slot', slotName: 'handler' },
  ])

  const memberFormItem = ref<FormItemType[]>([
    { type: 'upload', prop: 'avatar', label: '头像' },
    { type: 'input', prop: 'name', label: '姓名' },
    { type: 'input', prop: 'age', label: '年龄' },
    {
      type: 'select',
      prop: 'sex',
      label: '性别',
      options: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
      ],
    },
    {
      type: 'select',
      prop: 'sgRoleId',
      label: '角色',
      props: { label: 'roleName', value: 'id' },
      async: {
        url: API.MEMBER_ROLE_LIST_URL,
        method: 'post',
        fetchSearch: true,
        initRequest: true,
        data: () => getData(),
      },
      options: [
        { label: '男', value: 0 },
        { label: '女', value: 1 },
      ],
    },
    { type: 'input', prop: 'edu', label: '学历' },
    { type: 'input', prop: 'university', label: '毕业学校' },
    { type: 'input', prop: 'phone', label: '电话' },
    { type: 'input', prop: 'email', label: '邮箱' },
    { type: 'input', prop: 'intro', label: '个人简介' },
    { type: 'input', prop: 'weight', label: '权重' },
  ])

  const getData = async () => {
    const { data } = await reqQueryRoleList(1)
    return data
  }

  const memberAddData = reactive<reqMemberBody>({
    subjectGroupId: 1,
    avatar: '',
    name: '',
    age: 0,
    sex: 0,
    edu: '',
    university: '',
    phone: '',
    email: '',
    intro: '',
    weight: 0,
    status: 0,
    sgRoleId: 0,
  })

  const memberRoleItem = ref<FormItemType[]>([
    { type: 'input', prop: 'roleName', label: '角色名称' },
    { type: 'input', prop: 'weight', label: '权重' },
  ])

  const memberRoleData = ref<reqMemberRoleBody>({
    subjectGroupId: 1,
    roleName: '',
    weight: 0,
  })

  return {
    memberTableColumn,
    memberFormItem,
    memberAddData,
    memberRoleItem,
    memberRoleData,
  }
}
